<template>
    <div class="register">
        <div class="left-side">
            <div class="register-content">
                <p class="left-side-tittle">{{ t('register.register') }}</p>
                <ElForm
                    ref="formRef"
                    :model="numberValidateForm"
                    class="register-ruleForm"
                    label-position="top"
                    :rules="rules"
                    :inline="true"
                >
                    <ElFormItem :label="t('register.account')" prop="account">
                        <ElInput
                            v-model="numberValidateForm.account"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.tel')" prop="phone">
                        <ElInput
                            v-model.number="numberValidateForm.phone"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.email')" prop="email">
                        <ElInput
                            v-model="numberValidateForm.email"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.address')" prop="adress">
                        <ElInput
                            v-model="numberValidateForm.adress"
                            class="register-input"
                            type="text"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>

                    <ElFormItem :label="t('register.password')" prop="password">
                        <ElInput
                            v-model="numberValidateForm.password"
                            class="register-input"
                            type="password"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>
                    <ElFormItem :label="t('register.confirmPassword')" prop="passwordComfirm">
                        <ElInput
                            v-model="numberValidateForm.passwordComfirm"
                            class="register-input"
                            type="password"
                            autocomplete="off"
                        ></ElInput>
                    </ElFormItem>
                    <ElFormItem>
                        <ElButton
                            v-logAction="{
                                actionId: 'click',
                                actionPage: '/register',
                                item: '注册按钮',
                                paras: '用户点击注册提交按钮',
                            }"
                            type="primary"
                            class="registerBtn"
                            @click="submitForm(formRef)"
                        >
                            {{ t('register.register') }}
                        </ElButton>
                        <p class="register-back">
                            {{ t('register.signedUpTip') }}
                            <ElButton type="text" class="register-back-btn" @click="backToLogin">
                                {{ t('register.loginImmediately') }}
                            </ElButton>
                        </p>
                    </ElFormItem>
                </ElForm>
            </div>
        </div>
        <div class="right-side fr"></div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { ElForm, FormInstance } from 'element-plus';
import { useRouter } from 'vue-router';
import { registerUser } from '@/api/api.query.util';
import { debounce } from '@/utils/utils';
import { ElMessage } from 'element-plus';
import { onLocaleChanged, t } from '@/i18n';

const formRef = ref<FormInstance>();
const numberValidateForm = reactive({
    account: '',
    phone: '',
    email: '',
    adress: '',
    password: '',
    passwordComfirm: '',
});
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error(t('register.passwordEmptyTip')));
    } else {
        if (numberValidateForm.passwordComfirm !== '') {
            if (!formRef.value) return;
            formRef.value.validateField('passwordComfirm', () => null);
        }
        callback();
    }
};

const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error(t('register.confirmPwdEmptyTip')));
    } else if (value !== numberValidateForm.password) {
        callback(new Error(t('register.pwdNotTheSame')));
    } else {
        callback();
    }
};

const rules = ref(getRules());
onLocaleChanged(() => {
    rules.value = getRules();
});
function getRules() {
    return {
        account: [
            {
                required: true,
                message: t('register.accountEmptyTip'),
            },
            {
                min: 2,
                max: 10,
                message: t('register.accountLengthRangeTip'),
                trigger: 'blur',
            },
        ],
        phone: [
            {
                required: false,
            },
            {
                type: 'number',
                message: t('register.telMustBeNum'),
            },
        ],
        password: [
            {
                min: 6,
                max: 18,
                message: t('register.pwdLengthRangeTip'),
                trigger: 'blur',
            },
            {
                required: true,
                validator: validatePass,
                trigger: 'blur',
            },
        ],
        passwordComfirm: [
            {
                required: true,
                validator: validatePass2,
                trigger: 'blur',
            },
        ],
    };
}

const router = useRouter();
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    debounce(() => {
        formEl.validate((valid) => {
            if (valid) {
                registerUser({
                    method: 'post',
                    data: {
                        address: numberValidateForm.adress,
                        email: numberValidateForm.email,
                        password: numberValidateForm.password,
                        phoneNo: numberValidateForm.phone,
                        userName: numberValidateForm.account,
                        accountType: 1,
                    },
                }).then((res) => {
                    ElMessage({
                        message: t('register.registerSuccessfully'),
                        type: 'success',
                    });
                    router.push({ path: '/login' });
                });
            }
        });
    }, 500);
};

function backToLogin() {
    router.push({ path: '/login' });
}
</script>

<style scoped>
.register {
    display: flex;
    align-items: center;
}
.left-side {
    width: 66vw;
    display: flex;
    justify-content: center;
    align-item: center;
}

.right-side {
    width: 34vw;
    height: 100vh;
    background: url('../../assets/image/register_banner.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.register-content {
    width: 800px;
    height: 500px;
}
.left-side-tittle {
    font-size: 26px;
    color: #333;
    font-weight: 600;
    margin-bottom: 35px;
}

.registerBtn {
    width: 592px;
    font-size: 14px;
    background-color: #3ab0a2;
    border-radius: 4px;
    margin-top: 6px;
}

.register-back {
    text-align: center;
    font-family: AdobeHeitiStd-Regular;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #333333;
}

.register-back-btn {
    color: #3ab0a2;
}

.register-input {
    width: 290px;
    height: 42px;
    border-radius: 4px;
}
/deep/.el-form-item__label {
    line-height: 20px;
}
/deep/.el-form--label-top .el-form-item__label {
    padding: 0px;
}
</style>
